<template>
  <div style="height: 100vh; background: #f5f5f5;">
    <DragBall @click="onBallClick" style="background: #f60; position: absolute; borderRadius: 50%;">
        <img src="./imgs/avatar.jpg" alt="" draggable="false" >
    <!-- <DragBall :width="80" :height="80" @click="onBallClick" style="background: #f60;"> -->
      <!-- <template #default>
        <div style="width:56px;height:56px;display:flex;align-items:center;justify-content:center;">
          <span style="color:#fff;font-size:24px;">球</span>
        </div>
      </template> -->
    </DragBall>
  </div>
</template>

<script setup lang="ts">
import { DragBall } from './index'
// import avatar from '@/imgs/avatar.jpg'

function onBallClick() {
  alert('你点击了悬浮球！')
}
</script>